<script setup>
  import {ref} from "vue"
  const bookList = ref([
    {id: 1, name: "《三国演义》", author: "罗贯中"},
    {id: 2, name: "《红楼梦》", author: "曹雪芹"},
    {id: 3, name: "《水浒传》", author: "施耐庵"},
    {id: 4, name: "《西游记》", author: "吴承恩"},
  ])
  const delBook = (n) => {
    // ref类型响应式数据在外部使用需要.value获取值
    if (window.confirm("确认删除本图书吗？")) {
      bookList.value.splice(n, 1)
    }
  } 
</script>

<template>
  <div class="bookshelf">
    <h3>小比特的书架</h3>
    <ul>
      <li v-for="item, index in bookList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="delBook(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style>
  * {
    box-sizing: border-box;
  }
  #app {
    /* 1.调整容器 */
    width: 400px;
    margin: 100px auto;
    padding: 0px 1em;
    /* 2.设置边框线 */
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .5);
  }
  .bookshelf ul {
    /* 去除便签前面的标记 */
    list-style: none;
    padding: 0;
  }
  .bookshelf li {
    /* 1.设置为弹性布局 */
    display: flex;
    justify-content: space-around;
    /* 2.设置边框 */
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }
</style>